<template>
  <div>
    <!-- 查询表单 -->
    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">
      <el-form-item>
        <el-button type="danger" size="small" @click="deleteBatch" icon="el-icon-delete">删除</el-button>
      </el-form-item>
      <el-form-item label="订单号" prop="oNum">
        <el-input size="small" clearable v-model="keyword.oNum" placeholder="订单号"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
        <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 数据展示表 -->
    <el-table v-loading="loading" :data="orderList" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="订单号" width="120" prop="onum"> </el-table-column>
      <el-table-column label="客户姓名" width="120" prop="cname"> </el-table-column>
      <el-table-column label="产品名称" width="120" prop="pname"></el-table-column>
      <el-table-column label="收款金额" width="120" prop="money"></el-table-column>

      <el-table-column label="付款方式" width="120" prop="payType"></el-table-column>
      <el-table-column label="经办人" width="120" prop="ename"></el-table-column>
      <el-table-column label="付款状态" width="120" prop="finishFlag">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.finishFlag == 1" type="success">已付款</el-tag>
          <el-tag v-if="scope.row.finishFlag == 0" type="danger">未付款</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="150" prop="createTime"></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[3, 5, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 修改对话框 -->
    <el-dialog title="修改收款单" :visible.sync="updateDialogFormVisible" width="40%">
      <el-form :model="updateOrderForm">
        <el-form-item label="订单号" prop="oNum">
          <el-input v-model="updateOrderForm.onum" placeholder="订单号" readonly></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="cname">
          <el-input v-model="updateOrderForm.cname" readonly></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="pname">
          <el-input v-model="updateOrderForm.pname" readonly></el-input>
        </el-form-item>
        <el-form-item label="收款金额" prop="money">
          <el-input v-model="updateOrderForm.money" readonly></el-input>
        </el-form-item>
        <el-form-item label="付款方式" prop="type">
          <el-select v-model="updateOrderForm.typeId" placeholder="请选择付款方式">
            <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款状态" prop="finishFlag">
          <el-select v-model="updateOrderForm.finishFlag">
            <el-option label="未完成" value="0"></el-option>
            <el-option label="已完成" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经办人" prop="ename">
          <el-select v-model="updateOrderForm.eid">
            <el-option v-for="item in eidOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div>
        <el-button type="primary" @click="updateButton">提交</el-button>
        <el-button @click="updateDialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { getAll, deleteById, deleteByIds,updateFinishFlag} from '@/api/receipt'
import{getEidOptions} from '@/api/pm'
import{getList} from '@/api/emp'


export default {
  data() {
    return {
      eidOptions: [],
      typeOptions: [],
      title: '',

      salesorderlist: {},
      updateDialogFormVisible: false,
      ids: [],
      selectionRowArr: [],
      loading: false,
      orderList: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      currentPage: 1,
      loading: false,
      keyword: {
        oNum: ''
      },
      updateOrderForm: {
        id: '',
        onum: '',
        cname: '',
        pname: '',
        money: '',
        payType: '',
        ename: '',
        finishFlag: '',
        createTime: '',
        pid: '',
        eid: '',
        cid: '',
        typeId: ''

      }
    }
  },
  methods: {
    
    getEditionData() {
      getList().then(response => {
        console.log("typelist", response)
        this.eidOptions = response.data
      })
    },
    getTyperData() {
      getEidOptions().then(response => {
        console.log("typelist", response)
        this.typeOptions = response.data
      })
    },    //打开添加对话框
    openAddDialog() {
      this.getTyperData()
      this.getEditionData()

    },
    // 选择行
    handleSelectionChange(selectionRowArr) {
      this.ids = [];
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].id)
      }
      console.log("receipt line 74:", this.ids)
    },
    // 批量删除
    deleteBatch() {
      this.$confirm('此操作将永久删除' + this.ids.length + '条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //delBatch  刚才api/unit.js中一个axios方法
        deleteByIds(this.ids).then(response => {
          // console.log("md line 151:", response)
          if (response.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
          this.selectOrderListVO()
        })
      })
    },
    // 删除
    handleDelete(row) {
      // console.log("line68", row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById({ id: row.id }).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'

            });
            this.selectOrderListVO();
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
          this.selectOrderListVO();
        })
      })

    },
    // 重置
    resetSearchForm() {
      this.keyword = {}
      this.selectOrderListVO()
    },
    // 查询
    search() {
      this.selectOrderListVO()
      this.currentPage = 1
    },
    // 分页查询全部
    selectOrderListVO() {
      // this.loading = true
      getAll({
        onum: this.keyword.oNum,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(response => {
        console.log("receipt line56:", response.data.list)
        this.loading = false
        this.orderList = response.data.list
        this.total = response.data.total
      })
    },
    handleUpdate(row) {
      this.updateDialogFormVisible = true
      this.updateOrderForm = row
      this.openAddDialog()
    },
    updateButton(){
      updateFinishFlag({
        id: this.updateOrderForm.id,
        typeId: this.updateOrderForm.typeId,
        eId: this.updateOrderForm.eid,
        finishFlag: this.updateOrderForm.finishFlag
      }).then(response=>{
        if(response.code == 200){
          this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.updateDialogFormVisible = false
        this.selectOrderListVO()
        }
        
        
})
    }
  },
  created() {
    this.selectOrderListVO()
  },
}
</script>
<style scoped></style>